<template>
  <div class="grid-1">
    <div class="grid-item grid-item-1">1</div>
    <div class="grid-item grid-item-2">2</div>
    <div class="grid-item grid-item-3">3</div>
  </div>
</template>
<style lang="scss" scoped>
.grid-1 {
  width: 150px;
  height: 150px;
  background: #00f;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr [col4];
  grid-template-rows: [row1] 1fr [row2] 1fr [row3] 1fr [row4];
  .grid-item-1 {
    grid-column-start: col2;
    grid-column-end: col4;
    grid-row-start: col2;
    grid-row-end: row2;
  }
}
</style>
